import React, { useState } from 'react';
import { Drawer } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import { ChromePicker } from 'react-color';
import style from '../Layout.module.less';

const BaseSetting = () => {
  const [visible, setVisible] = useState(false);
  const [color, setColor] = useState('#fff');
  const showDrawer = () => {
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };

  const handleChangeComplete = (value: any) => {
    setColor(value.hex);
  };
  return (
    <div>
      <SettingOutlined onClick={showDrawer} className={style.setting} />
      <Drawer
        title="系统布局配置"
        placement="right"
        closable={false}
        onClose={onClose}
        visible={visible}
      >
        <p>
          <ChromePicker color={color} onChangeComplete={handleChangeComplete} />
        </p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </div>
  );
};

export default BaseSetting;
